<template>
  <div class="detail">
    <!-- 顶部 -->
    <van-nav-bar left-arrow fixed @click-left="$router.back()">
      <template #right>
        <van-icon name="ellipsis" color="#fff" :size="25" />
      </template>
    </van-nav-bar>
    <!--标题 -->
    <h2>{{ detail.title }}</h2>
    <!-- 作者信息 -->
    <div class="aut">
      <div class="left">
        <img :src="detail.aut_photo" alt="" />
        <div>
          <p>{{ detail.aut_name }}</p>
          <span>{{ detail.pubdate | fromtime }}</span>
        </div>
      </div>
      <div class="right">
        <van-button round type="info" size="mini" @click="follow"
          ><span v-text="detail.is_followed ? '取消关注' : '+关注'"></span
        ></van-button>
      </div>
    </div>
    <!-- 内容 -->
    <div class="content" v-html="detail.content"></div>
    <!-- 猜你喜欢 -->
    <div class="guess">
      <h4>猜你喜欢</h4>
      <van-grid :column-num="2" :border="false">
        <van-grid-item text="胖虎重拳出击" />
        <van-grid-item text="胖虎重拳出击" />
        <van-grid-item text="胖虎重拳出击" />
        <van-grid-item text="胖虎重拳出击" />
        <van-grid-item text="胖虎重拳出击" />
        <van-grid-item text="胖虎重拳出击" />
      </van-grid>
    </div>
    <!-- 点赞按钮 -->
    <div class="btn">
      <van-button
        :type="detail.attitude === 1 ? 'danger' : 'default'"
        plain
        round
        @click="like"
      >
        <template #default>
          <span>
            <van-icon name="good-job-o" />
            点赞
          </span>
        </template>
      </van-button>
      <van-button
        :type="detail.attitude === 0 ? 'danger' : 'default'"
        plain
        round
        @click="hate"
      >
        <template #default>
          <span>
            <van-icon name="delete" />
            不喜欢
          </span>
        </template>
      </van-button>
    </div>
    <!-- 海报 -->
    <div class="banner">
      <img src="@/assets/images/banner.jpg" alt="" />
    </div>
    <!-- 评论组件 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="一滴都不剩了"
      @load="onLoad"
    >
      <comment />
    </van-list>

    <!-- 书写评论组件 -->
    <write />
  </div>
</template>

<script>
import comment from './com/comment'
import write from './com/write'
import {
  getArticleDet,
  apiFollow,
  apiDisFollow,
  apiLike,
  apiDisLike,
  apiDistaste,
  apiTaste
} from '@/api/article.js'
export default {
  data () {
    return {
      artid: this.$route.params.artid,
      detail: {},
      loading: false,
      finished: false
    }
  },
  methods: {
    // 关注
    async follow () {
      this.detail.is_followed = !this.detail.is_followed
      if (this.detail.is_followed) {
        // 关注用户
        await apiFollow(this.detail.aut_id)
      } else {
        // 取关用户
        await apiDisFollow(this.detail.aut_id)
      }
    },
    // 点赞
    async like () {
      if (this.detail.attitude === 1) {
        // 取消点赞
        this.detail.attitude = -1
        await apiDisLike(this.artid)
      } else {
        // 点赞
        await apiLike(this.artid)
        this.detail.attitude = 1
      }
    },
    // 不喜欢
    async hate () {
      if (this.detail.attitude === 0) {
        this.detail.attitude = -1
        await apiTaste(this.artid)
      } else {
        // 喜欢
        await apiDistaste(this.artid)
        this.detail.attitude = 0
      }
    }
  },
  components: {
    comment,
    write
  },
  async created () {
    const res = await getArticleDet(this.artid)
    this.detail = res.data.data
  }
}
</script>

<style lang="less" scoped>
.detail {
  margin-top: 85px;
  margin-bottom: 56px;
  .van-nav-bar {
    background-color: #3e9df8;
    height: 64px;
    /deep/ .van-nav-bar__arrow,
    .van-icon {
      color: #fff;
      transform: translateY(8px);
    }
  }
  h2 {
    text-align: center;
    font-size: 20px;
    margin-bottom: 12px;
  }
  .aut {
    display: flex;
    align-items: center;
    padding: 0 15px;
    margin-bottom: 25px;
    .left {
      flex: 1;
      display: flex;
      img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-right: 5px;
      }
      p {
        font-size: 14px;
      }
      span {
        font-size: 12px;
        color: #d2d2d2;
      }
    }
    .right {
      .van-button--mini {
        height: 29px;
        padding: 0px 26px;
      }
    }
  }
  .content {
    padding: 0 15px;
    margin-bottom: 25px;
    /deep/ code {
      width: 375px;
      word-break: break-all;
      white-space: normal;
    }
  }
  .guess {
    padding: 15px;
    .van-grid-item__content {
      padding: 14px 69px 0 0;
      .van-grid-item__text {
        font-size: 14px;
      }
    }
  }
  .btn {
    display: flex;
    justify-content: space-around;
    button {
      width: 30%;
    }
  }
  .banner {
    padding: 29px;
    img {
      width: 318px;
      height: 176px;
    }
  }
}
</style>
